<template>
	<view>
		<view class="row">
			<view class="row-top"><text>￥</text>{{total}}</view>
			<view class="row-bottom">
				<text>支付剩余时间</text>
				<uni-count-down color="#FF0000" splitorColor="#FF0000" :show-day="false" :hour="myHour" :minute="myMinute" :second="mySecond" />
			</view>
		</view>
		<view class="row4">
			<radio-group @change="radioChange">
				<view class="row4_item" v-for="(item, index) in items" :key="item.value">
					<view class="row4_item_letf">
						<i :class="item.class"></i>
						<text>{{item.text}}</text>
					</view>
					<view class="row4_item_rgith">
						<radio :value="''+item.value" :checked="index === current" />
					</view>
				</view>
			</radio-group>
		</view>
		<view class="btn" @click="paymony">
			{{items[current].text}}￥{{total}}
		</view>
	</view>
</template>

<script>
	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
	export default {
		data() {
			return {
				market_id: uni.getStorageSync('market_id'), //所属上级ID
				items: [{
					class: 'iconfont iconweixinzhifu icon-styl2',
					text: '微信支付',
					value: 1
				}],
				current: 0,
				pay: 1,
				myHour: 0,
				myMinute: 30,
				mySecond: 0,
				data: '',
				total: 0,
				score: 0
			}
		},
		components: {
			uniCountDown
		},
		onLoad(e) {
			this.total = e.total;
			this.score = e.score;
			this.data = JSON.parse(decodeURIComponent(e.data))
		},
		methods: {
			radioChange(e) {
				this.pay = evt.target.value;
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			paymony() {
				var _this = this;
				this.$sapi.apiPost('v1/' + this.market_id + '/mobile/unify/pay/wxapp', this.data).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: res.data.data,
						success: e => {
							uni.showToast({
								title: "支付成功",
								complete() {
									setTimeout(a => {
										uni.redirectTo({
											url: 'paysuccess?total=' + _this.total + '&score=' + _this.score
										})
									}, 800)
								}
							})
						},
						fail: e => {
							if (/canceled/.test(e.errMsg)) {
								uni.showToast({
									title: "用户取消支付",
									icon: "none"
								})
							} else {
								uni.showModal({
									content: '支付失败,原因为: ' + e.errMsg,
									showCancel: false
								});
							}
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.row {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.row-top {
			margin-top: 40upx;
			height: 80upx;
			line-height: 100upx;
			color: #FF0000;
			font-size: 46upx;

			text {
				font-size: 34upx;
			}
		}

		.row-bottom {
			font-size: 30upx;
			color: #FF0000;

			text {
				color: #333333;
				margin-right: 20upx;
			}
		}
	}

	.btn {
		color: #FFFFFF;
		background: #FFB800;
		width: 100%;
		height: 104upx;
		text-align: center;
		line-height: 104upx;
		position: fixed;
		bottom: 0upx;
		font-size: 34upx;
		font-weight: 500;
	}

	.row4 {
		width: 100%;
		background: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}

	.row4_item_letf {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 101upx;
		line-height: 101upx;
		margin-top: 20upx;
	}

	.row4_item_letf text {
		color: #333333;
		font-size: 34upx;
	}

	.icon-styl5 {
		color: #999999;
		display: inline-flex;
		line-height: 98upx !important;
	}

	.addCard {
		font-size: 28upx !important;
		color: #999999 !important;
		display: inline-flex;
		position: absolute;
		right: 100upx;
	}

	.row4_item {
		width: 92%;
		margin: auto;
		height: 101upx;
		line-height: 101upx;
		display: flex;
		justify-content: space-between;
		border-top: 2upx solid rgba(229, 229, 229, 0.6);
	}

	.row4 .row4_item:first-child {
		border: none;
	}

	.row4_item_rgith {
		height: 101upx;
		line-height: 101upx;

	}

	.row4_item_rgith radio {
		transform: scale(0.75);
	}

	.row4_item_rgith .wx-radio-input.wx-radio-input-checked {
		border: 1px solid #FF9900 !important;
		background: #FF9900 !important;
	}

	i {
		font-size: 70upx;
		margin-right: 15upx;
		line-height: 108upx;
	}

	.icon-styl2 {
		color: #41B035 !important;
	}
</style>
